<template>
  <div class="kbpz">
    <Card title="捆绑业务信息配置">
      <el-form inline label-width="80px" label-position="right" size="small">
        <el-form-item label="商品名称">
          <el-input v-model="form.valA"></el-input>
        </el-form-item>
        <el-form-item label="商品描述">
          <el-input v-model="form.valB"></el-input>
        </el-form-item>
        <el-form-item label="商品编码">
          <el-input disabled placeholder="此为系统生成项！"></el-input>
        </el-form-item>
      </el-form>
    </Card>
    <el-row :gutter="12" class="row">
      <el-col :span="8">
        <Card title="捆绑业务开展区域">
          <el-scrollbar>
            <kbzk />
          </el-scrollbar>
        </Card>
      </el-col>
      <el-col :span="8">
        <Card title="商产品选择">
          <el-scrollbar>
            <scp />
          </el-scrollbar>
        </Card>
      </el-col>
      <el-col :span="8">
        <Card title="业务操作生效规则">
          <el-scrollbar>
            <sx />
          </el-scrollbar>
        </Card>
      </el-col>
    </el-row>
    <el-button
      type="primary"
      style="float: right"
      @click="
        $message({
          message: '提交捆绑成功，商品编码为 BM52123578',
          type: 'success'
        })
      "
      >提交捆绑</el-button
    >
  </div>
</template>

<script>
import Card from '@/components/Card'
import sx from './components/sx'
import kbzk from './components/kbzk'
import scp from './components/scp'
export default {
  components: {
    Card,
    sx,
    kbzk,
    scp
  },

  data() {
    return {
      tableDataB: [
        { type: '业务受理', checked: '', checkList: [] },
        { type: '业务注销', checked: '', checkList: [] }
      ],
      form: {
        valA: '',
        valB: ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.kbpz {
  width: 100%;
  overflow-x: hidden !important;
}
.row {
  /deep/.el-card__body {
    height: 46vh;
  }
}
</style>
